import React, { useEffect, useState } from "react";
import { api } from "../../api/index.ts";
import AddWorkMenu from "@/layouts/components/AddWorkMenu";
import ys from "@/assets/images/ys.png";
import ys_selected from "@/assets/images/ys_selected.png";
import menu_add from "@/assets/images/menu_add.png";
import menu_search from "@/assets/images/menu_search.png";
import right_arrow from "@/assets/images/right_arrow.png";
import bottom_arrow from "@/assets/images/bottom_arrow.png";
import "./index.less";

// 定义Props接口
interface ParentProps {
  subId: string;
  subList: any;
}
const SubMenu: React.FC<ParentProps> = ({ subId, subList }) => {
  const [menuList, setMenuList] = useState<any[]>([]);
  const [usedList, setUsedList] = useState<any[]>([]);
  const [activeIndex, setActiveIndex] = useState(-1);
  const [usedActiveIndex, setUsedActiveIndex] = useState(-1);
  const [subActiveIndex, setSubActiveIndex] = useState(-1);
  const [addMenuModelShow, setAddMenuModelShow] = useState(false);
  useEffect(() => {
    const getMenuList = async () => {
      const id = subId;
      await api.commonModule(id).then(res => {
        setUsedList(res.data);
        setMenuList(subList);
      });
    };
    getMenuList();
  }, []);
  // 菜单点击
  function handleMenu(index: number) {
    let ind = index;
    if (activeIndex === index) ind = -1;
    setActiveIndex(ind);
  }
  function handleUsedMenu(index: number) {
    setUsedActiveIndex(index);
  }
  function handleSubMenu(index: number) {
    setSubActiveIndex(index);
  }
  const updateIsShow = (newValue: boolean | ((prevState: boolean) => boolean)) => {
    setAddMenuModelShow(newValue);
  };
  return (
    <div>
      <div className="menu-layout">
        {/* 常用菜单 */}
        <div className="used-menu">
          <div className="used-menu-title">
            <span>常用功能</span>
            <div className="used-right">
              <div className="used-icon">
                <img src={menu_search} alt="" />
                搜索
              </div>
              <div
                className="used-icon"
                onClick={() => {
                  setAddMenuModelShow(true);
                }}
              >
                <img src={menu_add} alt="" />
                添加
              </div>
            </div>
          </div>
          <div className="used-menu-content">
            {usedList.map((item, index) => {
              return (
                <div
                  className={`used-menu-item ${index === usedActiveIndex ? "used-menu-item-selected" : ""}`}
                  key={index}
                  onClick={() => {
                    handleUsedMenu(index);
                  }}
                >
                  <div className="used-menu-item-icon">
                    <img src={index === usedActiveIndex ? ys_selected : ys} />
                  </div>
                  <div className="used-menu-name">{item.fullName}</div>
                </div>
              );
            })}
          </div>
        </div>
        {/* 二级导航菜单 */}
        <div className="sub-menu-content">
          {menuList.map((item, index) => {
            return (
              <div className="sub-menu-item" key={index}>
                <div
                  className="sub-menu-item-title"
                  onClick={() => {
                    handleSubMenu(index);
                  }}
                >
                  {item.fullName}
                  <img
                    src={index === subActiveIndex ? bottom_arrow : right_arrow}
                    alt=""
                    className={`img-arrow ${index === subActiveIndex ? "img-arrow-selected" : ""}`}
                  />
                </div>
                {index === subActiveIndex ? (
                  <div className="third-menu">
                    {item.children.map((thirdItem: any, ind: number) => {
                      return (
                        <div
                          className={`third-menu-item ${index === activeIndex ? "third-menu-item-selected{" : ""}`}
                          onClick={() => {
                            handleMenu(ind);
                          }}
                        >
                          {thirdItem.fullName}
                        </div>
                      );
                    })}
                  </div>
                ) : (
                  ""
                )}
              </div>
            );
          })}
        </div>
      </div>
      {/* 添加常用菜单 */}
      {addMenuModelShow ? <AddWorkMenu onChangeIsShow={updateIsShow} subId={subId} /> : ""}
    </div>
  );
};
export default SubMenu;
